<template>
	<div class="index-news-box">
		<div class="index-news-content">
			<div class="index-news-first" @click="$router.push({name:'AllDetails',query: {id:news[0].id,type:2}})">

				<div class="cover">
					<div class="image" :style="{background:`url('${news[0]&&news[0].img}')`,backgroundSize:'cover'}"
						style="background-repeat: no-repeat;
                background-position: center center;"></div>
					<div class="mask"></div>
				</div>
				<div class="title">{{ news[0] && news[0].title }}</div>
			</div>
			<div class="index-news-other">
				<div class="news-list-item-one">
					<div class="item" @click="$router.push({name:'AllDetails',query: {id:news[1].id,type:2}})">

						<div class="cover">
							<div class="image"
								:style="{background:`url('${news[1]&&news[1].img}')`,backgroundSize:'cover'}" style="background-repeat: no-repeat;
                background-position: center center;"></div>
							<div class="mask"></div>
						</div>

						<div class="title1">{{ news[1] && news[1].title }}</div>
					</div>

				</div>
				<div v-if="news[2]&&news[2].img" class="news-list-item-two">
					<div class="item" @click="$router.push({name:'AllDetails',query: {id:news[2].id,type:2}})">

						<div class="cover">
							<div class="image"
								:style="{background:`url('${news[2]&&news[2].img}')`,backgroundSize:'cover'}" style="background-repeat: no-repeat;
					background-position: center center;"></div>
							<div class="mask"></div>
						</div>


						<div class="title1">{{ news[2] && news[2].title }}</div>
					</div>

				</div>
				<div v-if="news[3]&&news[3].img" class="news-list-item-three"
					@click="$router.push({name:'AllDetails',query: {id:news[3].id,type:2}})">
					<div class="one-item">
						<div class="cover">
							<div class="image"
								:style="{background:`url('${news[3]&&news[3].img}')`,backgroundSize:'cover'}" style="background-repeat: no-repeat;
                background-position: center center;"></div>
							<div class="mask"></div>
						</div>

						<div class="title1">{{ news[3] && news[3].title }}</div>
					</div>
				</div>
				<div v-if="news[4]&&news[4].img" class="news-list-item-four"
					@click="$router.push({name:'AllDetails',query: {id:news[4].id,type:2}})">
					<div class="one-item">
						<div class="cover">
							<div class="image"
								:style="{background:`url('${news[4]&&news[4].img}')`,backgroundSize:'cover'}" style="background-repeat: no-repeat;
                background-position: center center;" />
							<div class="mask"></div>
						</div>

						<div class="title1">{{ news[4] && news[4].title }}</div>
					</div>
				</div>
			</div>
		</div>
		<div class="index-news-button base-button f2" @click="$router.push({name:'NewsCenter'})">
			查看更多新闻
		</div>
	</div>

</template>

<script>
	import myFooter from "@/components/footer.vue"

	export default {
		name: "eight",
		props: ['phone', 'qrcode'],
		components: {
			myFooter
		},
		data() {
			return {
				news: []
			}
		},
		async mounted() {
			let data = await this.$http.get("/newsArticle/list", {
				params: {
					page: 1,
					pageSize: 5
				}
			})
			this.news = data.page.list;
		},
		methods: {}
	}
</script>

<style lang="less">
	.eight-box {
		background: rgba(214, 214, 214, .16);
	}

	.cover {
		display: inline-block;
		position: relative;
		vertical-align: top;
		width: 100%;
		height: 100%;

		.mask {
			height: 100%;
			background: rgba(0, 0, 0, 0.5);
			bottom: 0;
			color: white;
			font-size: 1em;
			left: 0;
			opacity: 0;
			overflow: hidden;
			// padding: 3.75em 3em;
			position: absolute;
			text-align: center;
			top: 0;
			right: 0;
			-webkit-transition: 0.6s;
			transition: 0.6s;
			cursor: pointer;
		}

		.mask:hover {
			// opacity: 1;
		}

		.mask:after,
		.mask:before {
			// border: 1px solid rgba(255, 255, 255, 0.7);
			bottom: 1em;
			content: '';
			left: 1em;
			opacity: 0;
			position: absolute;
			right: 1em;
			top: 1em;
			-webkit-transform: scale(1.5);
			-ms-transform: scale(1.5);
			transform: scale(1.5);
			-webkit-transition: 0.6s 0.2s;
			transition: 0.6s 0.2s;
		}

		.mask:hover:after,
		.mask:hover:before {
			-webkit-transform: scale(1);
			-ms-transform: scale(1);
			transform: scale(1);
			opacity: 1;
		}
	}


	.eight-box {
		.index-news-box {
			width: 1200px;
			height: 650px;
			padding: 60px 0;
			margin: auto;

			.index-news-content {
				display: flex;
				justify-content: space-between;
				height: calc(100% - 82px);
				position: relative;

				.image {
					height: 100%;
					overflow: hidden;
					width: 100%;
					cursor: pointer;
					display: block;

				}

				.title {
					color: #FFFFFF;
					// padding: 20px;
					line-height: 68px;
					font-size: 26px;
					overflow: hidden; //超出的文本隐藏
					text-overflow: ellipsis; //溢出用省略号显示
					white-space: nowrap; //溢出不换行
					cursor: pointer;
					position: absolute;
					width: 100%;
					height: 68px;
					background: rgba(0, 0, 0, .4);
					left: 0;
					bottom: 0;
				}

				.index-news-first {
					width: 45%;
					margin-right: 60px;
					position: relative;
				}

				.index-news-other {
					width: 55%;
					display: flex;
					flex-direction: column;

					div {
						margin-bottom: 5%;
						background: #FFFFFF;
					}

					.news-list-item-one {
						display: flex;

						height: 20%;
						justify-content: space-between;
						overflow: hidden;
						position: relative;

						.item {
							width: 100%;
							height: 100%;
							overflow: hidden;

							.cover {
								width: 20%;
								float: left;
							}

							.title1 {
								float: left;
								height: 100%;
								margin-left: 30px;
								padding-left: 30px;
								display: flex;
								align-items: center;
								position: relative;
							}

							.title1:after {
								content: '';
								width: 2px;
								height: 80%;
								background: #983C1A;
								position: absolute;
								left: 0;
								top: 10%;
							}
						}
					}

					.news-list-item-two {
						display: flex;
						height: 20%;
						overflow: hidden;
						position: relative;

						.one-item {
							width: 100%;

						}

						.item {
							width: 100%;
							height: 100%;
							overflow: hidden;

							.cover {
								width: 20%;
								float: left;
							}

							.title1 {
								float: left;
								height: 100%;
								margin-left: 30px;
								padding-left: 30px;
								display: flex;
								align-items: center;
								position: relative;
							}

							.title1:after {
								content: '';
								width: 2px;
								height: 80%;
								background: #983C1A;
								position: absolute;
								left: 0;
								top: 10%;
							}
						}
					}

					.news-list-item-three {
						display: flex;
						height: 20%;
						overflow: hidden;
						position: relative;

						.one-item {
							width: 100%;

							.cover {
								width: 20%;
								float: left;
							}

						}

						.item {
							width: 49%;
							height: 100%;
							overflow: hidden;

							.cover {
								width: 20%;
								float: left;
							}

							.title1 {
								float: left;
								height: 100%;
								margin-left: 30px;
								padding-left: 30px;
								display: flex;
								align-items: center;
								position: relative;
							}

							.title1:after {
								content: '';
								width: 2px;
								height: 80%;
								background: #983C1A;
								position: absolute;
								left: 0;
								top: 10%;
							}
						}
					}

					.news-list-item-four {
						display: flex;
						height: 20%;
						overflow: hidden;
						position: relative;

						.one-item {
							width: 100%;

							.cover {
								width: 20%;
								float: left;
							}

						}

						.item {
							width: 49%;
							height: 100%;
							overflow: hidden;

							.cover {
								width: 20%;
								float: left;
							}

							.title1 {
								float: left;
								height: 100%;
								margin-left: 30px;
								padding-left: 30px;
								display: flex;
								align-items: center;
								position: relative;
							}

							.title1:after {
								content: '';
								width: 2px;
								height: 80%;
								background: #983C1A;
								position: absolute;
								left: 0;
								top: 10%;
							}
						}
					}
				}
			}
		}

		.index-news-button {
			color: #FFFFFF;
			width: 40%;
			margin: 10px auto;
			cursor: pointer;
		}
	}
</style>
<style lang="less">
	@media screen and (min-width: 0px) and (max-width: 680px) {
		.eight-box {
			.index-news-box {
				width: 90%;

				.index-news-content {
					flex-direction: column;

					.image:after {
						content: '';
						display: block;
						padding-top: 30%;
					}

					.index-news-first {
						width: 100%;
						height: 20%;
					}

					.index-news-other {
						width: 100%;
						height: 80%;

						.news-list-item {
							height: 30%;

							.item {
								width: 100%;
							}
						}
					}
				}
			}

			.index-news-button {
				margin: 5px 0;
				width: 100%;
				padding: 10px 0;
			}
		}
	}
</style>
